import React, { Component } from 'react'
import {Table, Button, Layout, Input, Dialog, Message} from 'element-react'
import {withRouter} from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import DatePicker from '../base/DatePicker'
import Pagination from '../base/Pagination'
import Select from '../base/Select'
import {SearchPanel} from '../base/BaseStatic'
// import styled from 'styled-components'

class afterSales extends Component {
  constructor (props) {
    super(props)
    this.state = {
      // 表格数据
      columns: [
        { label: '会员ID', prop: 'memberID', /* width: 180 */ },
        { label: '会员名', prop: 'memberName', /* width: 180 */ },
        { label: '订单号', prop: 'orderID' },
        { label: '申请类型', prop: 'applyType' },
        { label: '申请时间', prop: 'applyTime' },
        { label: '审核人', prop: 'reviewer' },
        { label: '审核状态', prop: 'reviewStatus' },
        { label: '操作', prop: 'operate', width: 220, render: () => {
          return (
            <Button.Group>
              <Button type="primary">查看</Button>
              <Button type="primary" onClick={this.edit.bind(this)}>编辑</Button>
              <Button type="primary" onClick={() => { this.props.history.push({ pathname: '/operatingRecord' }) }}>记录</Button>
            </Button.Group>
          )
        } }
      ],
      tableData: [/* 
        { memberID: '123', memberName: '123', orderID: '12', applyType: '245', applyTime: '23532', reviewer: '436', reviewStatus: '5463' },
        { memberID: '123', memberName: '123', orderID: '12', applyType: '245', applyTime: '23532', reviewer: '436', reviewStatus: '5463' }
       */],
      // 申请类型选项
      applyTypeOptions: [
        {
          value: 0,
          label: '仅退款'
        },
        {
          value: 1,
          label: '退货退款'
        },
        {
          value: 2,
          label: '换货'
        }
      ],
      // 审核状态选项
      reviewStatusOptions: [
        {
          value: 0,
          label: '未审核'
        },
        {
          value: 1,
          label: '审核中'
        },
        {
          value: 2,
          label: '审核通过'
        },
        {
          value: 4,
          label: '审核不通过'
        },
        {
          value: 5,
          label: '审核关闭'
        }
      ],
      userID: null, // 会员ID
      startTime: null, // 时间选择器
      endTime: null, // 时间选择器
      orderID: null, // 订单号
      applyType: null, // 申请类型
      reviewStatus: null, // 审核状态
      reviewer: null, // 审核人
      // 对话框
      dialogVisible: false,
      total: 50, // 总页数
    }
  }
  render () {
    return (
      <div>
        <Breadcrumb data={['售后', '售后申请管理']}/>
        {/* 搜索面板 */}
        <SearchPanel>
          <Layout.Row>
            <Layout.Col span="3" className="text"><div>会员ID：</div></Layout.Col>
            <Layout.Col span="5"><Input onChange={this.getUserID.bind(this)} placeholder={'请输入会员ID'} /></Layout.Col>
            <Layout.Col span="3" className="text"><div>申请起止时间：</div></Layout.Col>
            <Layout.Col span="13">
              <DatePicker getTime={this.getTime.bind(this)}/>
            </Layout.Col>
          </Layout.Row>
          <Layout.Row>
            <Layout.Col span="3" className="text"><div>订单号：</div></Layout.Col>
            <Layout.Col span="5"><Input onChange={this.getOrderID.bind(this)} placeholder={'请输入订单号'} /></Layout.Col>
            <Layout.Col span="3" className="text"><div>申请类型：</div></Layout.Col>
            <Layout.Col span="5"><Select options={this.state.applyTypeOptions} select={this.getApplyType.bind(this)}/></Layout.Col>
            <Layout.Col span="8"></Layout.Col>
          </Layout.Row>
          <Layout.Row>
            <Layout.Col span="3" className="text"><div>审核人：</div></Layout.Col>
            <Layout.Col span="5"><Input onChange={this.getReviewer.bind(this)} placeholder={'请输入审核人'} /></Layout.Col>
            <Layout.Col span="3" className="text"><div>审核状态：</div></Layout.Col>
            <Layout.Col span="5"><Select options={this.state.reviewStatusOptions} select={this.getReviewStatus.bind(this)}/></Layout.Col>
            <Layout.Col span="8"></Layout.Col>
          </Layout.Row>
          <Button type="primary" onClick={this.search.bind(this)} >搜索</Button>
        </SearchPanel>
        {/* 新增 */}
        <Button type="primary" style={{marginBottom:'20px'}} onClick={() => {this.props.history.push({ pathname: '/afterSalesIncrease' })}} >新增</Button>
        {/* 表格 */}
        <Table
          style={{width: '100%'}}
          columns={this.state.columns}
          data={this.state.tableData}
          border={true}
          highlightCurrentRow={true}
          onCurrentChange={this.handleCurrentChange.bind(this)}
        />
        {/* 分页 */}
        <Pagination total={this.state.total} changePage={this.changePage.bind(this)}/>
        {/* 确认认领对话框 */}
        <Dialog
          title="提示"
          size="tiny"
          visible={ this.state.dialogVisible }
          onCancel={ () => this.setState({ dialogVisible: false }) }
          lockScroll={ false }
          >
          <Dialog.Body>
            <span>确认修改？</span>
          </Dialog.Body>
          <Dialog.Footer className="dialog-footer">
            <Button onClick={ () => this.setState({ dialogVisible: false }) }>取消</Button>
            <Button type="primary" onClick={ () => this.props.history.push(`/afterSalesEdit/${12}`) }>确定</Button>
          </Dialog.Footer>
        </Dialog>
      </div>
    )
  }
  // 初始化列表
  init () {
    this.$ajax.findAfterSales({
      applicationDescribe: this.state.applyType,
      endApplicationTime: this.state.endTime,
      handlerName: this.state.reviewer,
      orderId: this.state.orderID,
      pageReq: {
        pageNo: 0,
        pageSize: 10
      },
      startApplicationTime: this.state.startTime,
      status: this.state.reviewStatus,
      userId: this.state.userID,
    }).then(res => {
      if (res.code === 200) {
        console.log(1)
      } else {
        Message.error('加载列表失败')
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  // 搜索回调
  search () { console.log('search') }
  // 编辑回调
  edit () { this.setState({ dialogVisible: true }) }
  // 表格中按钮操作回调
  handleCurrentChange (item) { console.log(item) }
  // 换页
  changePage () { console.log('changePage') }

  // 会员ID的getter
  getUserID (val) { this.setState({ userID: val }) }
  // 时间选择器getter
  getTime (begin, end) { this.setState({ startTime: begin, endTime: end }) }
  // 订单号的getter
  getOrderID (val) { this.setState({ orderID: val }) }
  // 申请类型的getter
  getApplyType (val) { this.setState({ applyType: val }) }
  // 审核状态的getter
  getReviewStatus (val) { this.setState({ reviewStatus: val }) }
  // 审核人的getter
  getReviewer (val) { this.setState({ reviewer: val }) }

  // 钩子函数
  componentDidMount () {
    this.init()
  }
}
export default withRouter(afterSales)